
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta name="author" content="上海酷利软件有限公司 Shanghai Kuli Software Co.,Ltd">
    <meta name="keyword" content="html5,canvas,javascript,拓扑图,流程图,组织图,网络图,矢量地图,思维导图,组件,开发包,ui,Diagramming,Library,Component, javascript">
    <title>Qunee for HTML5 - online Demos</title>
    <link rel="stylesheet" href="js/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="demo.css?v=2.6"/>
    <script type="text/javascript" src="js/i18n.js?v=2.6.2"></script>
    <script type="text/javascript" src="js/check-IE678.js?v=2.6.2"></script>

    <script type="text/javascript" src="js/jquery/jquery.min.js?v=2.6.2"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js?v=2.6.2"></script>
</head>
<body>

<header id="header" class="navbar navbar-fixed-top">
    <div id="navbar">
        <div class="navbar-header">
            <div>
                <a class="navbar-brand" href="http://qunee.com">
                    <div class="logo" title="qunee.com"></div>
                </a><span id="title">Light High Efficiency Graph Component</span>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right main_nav">
                <li><a href="http://qunee.com">Home</a></li>
                <li><a href="http://blog.qunee.com">Blog</a></li>
                <li><a href="http://doc.qunee.com">Doc</a></li>
                <li class="active"><a href="http://demo.qunee.com">Demo</a></li>
                <li class="new"><a href="http://map.qunee.com/">Map</a></li>
                <li><a href="http://demo.qunee.com/editor/">Editor</a></li>
                <li><a href="http://demo.qunee.com/svg2canvas/">SVG2Canvas</a></li>
            </ul>
        </div>
    </div>
</header>
<div id="page">
    <div id="left_panel">
        <div id="left_panel_top">
            <div class="input-group input-group-sm" id="demo_search"></div>
            <!--<div class="btn btn-default btn-sm" onclick="forEachDemo(event)">运行所有示例</div>-->
            <div class="q-sidebar" role="navigation" id="demo_list"></div>
        </div>
        <div id="other_list">
            <label>Online Demos</label>
            <ul class="nav"></ul>
            <script async src="./online-demos.js?v=2.6.2"></script>
        </div>
    </div>
    <div id="right_panel">
        <div>
            <ol id="demo_title" class="breadcrumb" style="float: left">
                <li class="active">Demos</li>
            </ol>
            <div title="About" id="about" style="float: right;" class="btn btn-sm">About</div>
            <div style="clear:both;"></div>
        </div>
        <div id="graph_panel" class="q-panel">
            <div role="toolbar" class="q-toolbar">
                <div>
                    <div id="toolbar"></div>
                    <div id="demo_menu" class="q-right">
                        <div id="btnJSONShow" title="JSON Export" class="btn btn-default btn-sm">
                            <div class="q-icon toolbar-json"></div>
                        </div>
                        <div id="btnOverview" title="Show Overview Panel" class="btn btn-default btn-sm">
                            <div class="q-icon toolbar-overview"></div>
                        </div>
                        <div title="Maximize" id="maximize" class="btn btn-default btn-sm">
                            <div class="q-icon toolbar-max"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="q-content">
                <div id="canvas"></div>
                <div id="overview" style="width: 150px;height: 120px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);position: absolute;right: 5px;top: 5px;background-color: #FFF;"></div>
                <style>
                    .Q-Export-JSON {
                        position: absolute;
                        top: 0px;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        background: #DDD;
                        opacity: 0.9;
                        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
                    }
                </style>
                <div class="Q-Export-JSON" id="Q-JSON-Panel" style="height: 0px; overflow: hidden;">
                    <div style="background: #EEE; position: absolute; top: 50px; bottom: 0px; width: 100%; overflow: auto;">
                        <textarea id="json_code_panel" style="height: 100%; width: 100%; border: none;"></textarea>
                    </div>
                    <div style="padding: 10px; height: 50px; float: right; position: relative;">
                        <div id="btnJSONSubmit" class="btn btn-primary btn-sm" title="Submit">Submit</div>
                        <div id="btnJSONClose" class="btn btn-primary btn-sm" title="Close">Close</div>
                    </div>
                </div>
                <div class="mask" id="mask_panel">
                    <div class="loading">Loading...</div>
                </div>
            </div>
        </div>
        <div id="code_container">
            <div class="q-toolbar">
                <div class="row">
                    <div class="col-md-8 col-xs-6"><span id="code_title">Code</span></div>
                    <div class="col-md-4 col-xs-6 q-right">
                        <div id="btnRunCode" class="btn btn-primary btn-sm" title="Run Code">Run</div>
                    </div>
                </div>
            </div>
            <textarea id="code_panel"></textarea>
        </div>
    </div>
</div>
<div style="clear:both;"></div>
<footer id="footer" role="contentinfo">
    <div>
        Copyright © 2014 - 2020 上海酷利软件有限公司 Shanghai Kuli Software Co.,Ltd. All right reserved. Email: <span
            style="color: #2898E0;">support#qunee.com</span>
    </div>
</footer>
<div style="clear:both;"></div>
<div class="modal fade" id="q-message">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./lib/qunee-min.js?v=2.6.2"></script>
<!--<script type="text/javascript" src="../qunee.js?v=2.6.0.5"></script>-->
<script type="text/javascript" src="js/common.js?v=2.6.2?v"></script>
<script type="text/javascript" src="js/graphs.js?v=2.6.2"></script>
<script type="text/javascript" src="js/demo.js?v=2.6.2"></script>

<link rel="stylesheet" href="js/codemirror/codemirror.css">
<script src="js/codemirror/codemirror.js?v=2.6.2"></script>
<script src="js/codemirror/javascript.js?v=2.6.2"></script>
<script>
    var code_panel = document.getElementById("code_panel");
    var editor = CodeMirror.fromTextArea(code_panel, {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/javascript"
    });
    code_panel.getValue = function () {
        return editor.getValue();
    }
    code_panel.setValue = function (v) {
        editor.setValue(v);
    }
    code_panel.setValue(code_panel.value);
    code_panel.editor = editor;
</script>
</body>
</html>
